<template>
  <div class="breadcrumb-container">
    <nav class="breadcrumb-nav">
      <ol class="breadcrumb-list">
        <li 
          v-for="(item, index) in breadcrumbItems" 
          :key="index"
          class="breadcrumb-item"
          :class="{ 'active': index === breadcrumbItems.length - 1 }"
        >
          <router-link 
            v-if="index < breadcrumbItems.length - 1" 
            :to="item.path"
            class="breadcrumb-link"
          >
            <span class="breadcrumb-icon" v-if="item.icon">{{ item.icon }}</span>
            <span class="breadcrumb-text">{{ item.title }}</span>
          </router-link>
          <span v-else class="breadcrumb-current">
            <span class="breadcrumb-icon" v-if="item.icon">{{ item.icon }}</span>
            <span class="breadcrumb-text">{{ item.title }}</span>
          </span>
          <span 
            v-if="index < breadcrumbItems.length - 1" 
            class="breadcrumb-separator"
          >
            /
          </span>
        </li>
      </ol>
    </nav>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 面包屑配置
const breadcrumbConfig = {
  '/home': [
    { path: '/home', title: '首页', icon: '🏠' }
  ],
  '/pos': [
    { path: '/home', title: '首页', icon: '🏠' },
    { path: '/pos', title: '快速收银', icon: '💰' }
  ],
  '/inventory': [
    { path: '/home', title: '首页', icon: '🏠' },
    { path: '/inventory', title: '商品管理', icon: '📦' }
  ],
  '/members': [
    { path: '/home', title: '首页', icon: '🏠' },
    { path: '/members', title: '会员管理', icon: '👥' }
  ],
  '/reports': [
    { path: '/home', title: '首页', icon: '🏠' },
    { path: '/reports', title: '报表统计', icon: '📊' }
  ],
  '/settings': [
    { path: '/home', title: '首页', icon: '🏠' },
    { path: '/settings', title: '系统设置', icon: '⚙️' }
  ],
  '/backup': [
    { path: '/home', title: '首页', icon: '🏠' },
    { path: '/backup', title: '数据备份', icon: '💾' }
  ]
}

// 计算面包屑项
const breadcrumbItems = computed(() => {
  const currentPath = route.path
  return breadcrumbConfig[currentPath] || [
    { path: '/home', title: '首页', icon: '🏠' }
  ]
})
</script>

<style scoped>
.breadcrumb-container {
  background: white;
  border-bottom: 1px solid #e4e7ed;
  padding: 8px 24px;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 6px;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #409eff;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.breadcrumb-link:hover {
  background: #f0f9ff;
  color: #1890ff;
}

.breadcrumb-current {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 6px;
}

.breadcrumb-icon {
  margin-right: 4px;
  font-size: 14px;
}

.breadcrumb-text {
  font-size: 12px;
}

.breadcrumb-separator {
  color: #c0c4cc;
  margin: 0 3px;
  font-size: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .breadcrumb-container {
    padding: 6px 16px;
  }
  
  .breadcrumb-text {
    font-size: 10px;
  }
  
  .breadcrumb-icon {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .breadcrumb-list {
    flex-wrap: wrap;
  }
  
  .breadcrumb-item {
    margin-bottom: 2px;
  }
  
  .breadcrumb-container {
    padding: 4px 12px;
  }
}
</style> 